<%@ page import="com.fuful.domain.Product" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.io.IOException" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page errorPage="error.jsp"%>
<%
    /*
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");// 注意設置為utf-8否則前端接收到的中文為亂碼
    //获取共享对象
    List<Product> data = (ArrayList)session.getAttribute("productdata");
     */

%>
<html>
<head>
    <title>产品界面</title>
</head>
<body>
<p>欢迎 <%--<%=name%>--%> 登录</p>
<p>
<button id="next">显示下一页</button>
</p>
      <table border="1px">
          <thead id="t_head">
          <tr>
              <td>序号</td>
              <td>产品ID</td>
              <td>产品名称</td>
              <td>产品类型</td>
              <td>产品价格</td>
              <td>添加时间</td>
          </tr>
          </thead>


          <tbody id="t_body">
          <!-- ajax填充列表 -->
          </tbody>
      </table>



<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

<script>
      var pageSize = "5";//每页行数
      var currentPage = "1";//当前页
      var totalPage = "10";//总页数
      var rowCount = "0";//总条数
      var params="";//参数
      var url="activity_list.action";//action
      $(document).ready(function(){//jquery代码随着document加载完毕而加载
          queryForPages();                         //分页查询
          function queryForPages()
          {
              $.ajax({
                  url:"pageProducts.do",
                  type:'post',
                  dataType:'text',
                  data:"cPage="+currentPage,
                  success: callbackFun,
                  error: errorFun
              });
          }

          function callbackFun(data)
          {
              //解析json
              var info = JSON.parse(data);
              totalPage = info.pages;
              fillTable(info);
          }
          function errorFun(){
              alert("服务器繁忙！");
          }


          //填充数据
          function fillTable(info)
          {
              if(info.list.length>1)
              {
                  pageSize=info.length;

                  for(var i=0;i<(info.list.length);i++)   //用后台数据的长度不会造成错误
                  {   var tbody_content="";//不初始化字符串"",会默认"undefined"
                      tbody_content +="<tr>"
                          +"<td data-title='序号'>"+(i+1+(currentPage-1)*5)+"</td>"
                          +"<td data-title='产品ID'>"+ info.list[i].pid +"</td>"
                          +"<td data-title='产品名称'>"+ info.list[i].pname +"</td>"
                          +"<td data-title='产品类型'>"+ info.list[i].ptid.ptname +"</td>"
                          +"<td data-title='产品价格'>"+ info.list[i].pprice +"</td>"
                          +"<td data-title='添加时间'>"+ info.list[i].addtime +"</td>"
                        +"</tr>"
                    $("#t_body").append(tbody_content);
                }
            }
            else
            {
                $("#t_head").html("");
                $("#t_body").html("<div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>"+"没有更多数据了"+"</div>");
            }
        }



        //下一页
        $("#next").click(function(){
            if(currentPage<=totalPage)
            {
                currentPage++ ;
                queryForPages();
            }
            else{
                alert("已经没数据了!");
            }
        });

    });

</script>

</body>
</html>
